@charset "utf-8";
/* 外部CSS文件，第一行：控制乱码 */
/* 第二行：设置通用样式 */
*{
    /* 所有元素存在盒模型：内外边距+边框+内容组成
     但是，有些元素默认自带外边距：body，ul/ol，p
     */
    margin:0;/* 去掉外边距 */
    padding:0;/* 去掉内边距 */
    /* 文字：家族形式 */
    font-family:"华文彩云";
    font-size: 88px;
}



/* 测试：外部css文件是否关联 添加背景 */
body{
    background-color: #ff0;
    /* 背景属性【复合属性】:可以省略属性值的属性
    属性值：image，origin与size，repeat，color
    常用背景属性：url() ;repeat
        子属性与主属性使用一致！
    子属性：background-color 背景颜色
           background-image 背景图片 属性值：url(图片路径）、url("",'')    
            background-size 背景尺寸：宽 高
            background-repeat背景平铺 no-repeat
    注意：设置背景图之后立即加背景图宽高！
    背景属性与图片元素的区别？
    背景属性，频繁移动的元素
    图片元素，出现固定在页面
     */
     background:#f00;
     background-image: url(../img/cloud.png);/* 背景图 */
     
     background-repeat: no-repeat;
     background:url(../img/bg.jpg) no-repeat;
     background-size:100% 760px ;
}
/* 熊猫 */
.bear{
    width:200px;
    height:300px;
    /* 验证选择器是否选中 */
    bor der:1px solid red;
    background:url(../img/img/bear_1.png);
    background-size:100% 100%;
    position:relative;
    left:10px;
    top:-66px;
    /* 熊div元素添加动画：启动关键帧 */
    animation: bear 10s linear infinite;
}
/* 1个动画：创建一个关键帧  特点：具体元素上启动关键帧存在继承性
宽高 背景 定位属性被继承
*/
                              
@keyframes bear{
    0%{/* 初始化 */
    left:10px;
    top:-6px;
    }
    10%{
        left:10px;
        top:-6px;
        background: url(../img/bear_1.png);
        background-size: 100% 100%;
    }
    20%{
        left:100px;
        top:100px;
        
        background: url(../img/bear_2.png);
        background-size: 100% 100%;
    }
    30%{ 
        left:300px;
        top:170px;
        background: url(../img/bear_3.png);
        background-size: 100% 100%;
    }
    40%{
        left:600px;
        top:130px;
        background: url(../img/bear_4.png);
    
    background-size: 100% 100%;
    }
    50%{
        left:800px;
        top:10px;
        background: url(../img/bear_5.png);
    background-size: 100% 100%;
    }
    60%{
        left:900px;
        top:-100px;
        background: url(../img/bear_6.png);
    background-size: 100% 100%;
    }
    70%{
        left:1200px;
        top:100px;
        background: url(../img/bear_7.png);
    background-size: 100% 100%;
    }
    80%{
        left:900px;
        top:388px;
        background: url(../img/bear_8.png);
    background-size: 100% 100%;
    }
    90%{
        left:700px;
        top:38px;
        background: url(../img/bear_9.png);
    background-size: 100% 100%;
    }
    100%{
        left:300px;
        top:100px;
        background: url(../img/bear_10.png);
    background-size: 100% 100%;
    }
}